<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>MeteoCal</title>
        <link type="text/css" rel="stylesheet" href="../resources/css/cuEvent.css" />
    </h:head>
    <body>
        <div id="header"></div>
        <a href="homepage.xhtml?faces-redirect=true" ><img id="logo" src="../resources/images/logo.png"/></a> 
        <h:form id="formdock">
            <p:dock position="top" maxWidth="30" itemWidth="55">
                <p:menuitem  value="Invitations" action="#{invitationBean.retriveInvitation()}" icon="../resources/images/mail.png"/>
                <p:menuitem action="#{eventBean.tocreateEvent()}" value="New Event" icon="../resources/images/new.png"/>
                <p:menuitem value="Notifications" action="#{userBean.notifications()}" icon="../resources/images/Notification.png"/>
            </p:dock>
            <p:panelGrid id="panelSearch" columns="2">
                <p:autoComplete placeholder="Search Events or Users" id="themePojo" value="#{scheduleUserBean.selectedTheme}" completeMethod="#{autoCompleteView.completeTheme}"
                                var="theme" itemLabel="#{theme.name}" itemValue="#{theme}" forceSelection="true" converter="themeConverter" minQueryLength="3"/>
                <p:commandButton icon="ui-icon-search" id="search" value="Search" action="#{scheduleUserBean.search()}"/>
                    
                <h:commandLink style="font-size: 75%;" id="toolTipFade" value="Advanced search" action="advsearch?faces-redirect=true"/>
            </p:panelGrid>
            <p:menuButton value ="Options"> 
                <p:menuitem value="Profile" action="#{userBean.goToProfile()}" icon="ui-icon-person"/>
                <p:menuitem value="Export Events" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" icon="ui-icon-arrowthick-1-s" actionListener="#{scheduleBean.createCalendarIcs()}">
                    <p:fileDownload value="#{scheduleBean.export()}" />
                </p:menuitem>
                <p:menuitem value="Import Events" onclick="PF('importDialog').show();" icon="ui-icon-arrowthick-1-n"/>
                <p:separator/>
                <p:menuitem value="Logout" action="#{LoginBean.logout()}" icon="ui-icon-power"/>
            </p:menuButton>
        </h:form>
        
        <h:form enctype="multipart/form-data">
            <p:dialog  modal="true" widgetVar="importDialog" header="Import new events" draggable="false" closable="true" resizable="false">
                    <p:growl id="growl" showDetail="true" />
                    <p:fileUpload value="#{scheduleBean.fileUploaded}" mode="simple"/>
                    <p:commandButton ajax="false" actionListener="#{scheduleBean.upload()}" value="Upload" onclick="PrimeFaces.monitorDownload(start, stop);"/>  
            </p:dialog>
        </h:form>
        <h:form id="for">
            <p:growl id="growl" showDetail="false" />
            <p:panel header="#{eventBean.par == 'true' ? 'Update' : 'Create'} Event" style="width: 96%; margin: 2.2% auto; height: 530px">
                <p:messages rendered="#{!eventBean.create}" id="message"  showDetail="true" autoUpdate="true" closable="false">
                    #{eventBean.msgInfo()}
                </p:messages>
                
                <div style="float: left;margin: 10px 35px auto 20px;  width: 39%">
                    <p:panelGrid columns="2" id="panelgr" columnClasses="column1,column2" style="float: bottom">
                    <p:outputLabel for="Name" value="Name"/>
                    <p:inputText id="Name" value="#{eventBean.e.name}" required="true" style="width: 92%" />
                                            
                    <p:outputLabel for="Description" value="Description"/>
                    <p:inputText id="Description" value="#{eventBean.e.description}" style="width: 92%"/>
                    
                    
                    <p:outputLabel for="City" value="City"/>
                    <p:inputText id="City" value="#{eventBean.e.city}" required="true" style="width: 92%"/>
                    
                    
                    <p:outputLabel for="Address" value="Address"/>
                    <p:inputText id="Address" value="#{eventBean.e.address}" style="width: 92%"/>
                    
                    
                    <p:outputLabel for="DateBegin" value="Date Begin:" />
                    <p:calendar mask="true" id="DateBegin" value="#{eventBean.e.dateBegin}" required="true"
                                mindate="#{eventBean.minDate()}">
                        <p:ajax event="dateSelect" update="DateEnd"/>
                    </p:calendar>
                        
                    
                    <p:outputLabel for="DateEnd" value="Date End:" />
                    <p:calendar mask="true" id="DateEnd" value="#{eventBean.e.dateEnd}" required="true"
                                mindate="#{eventBean.e.dateBegin}">
                        <f:attribute name="startDate" value="#{eventBean.e.dateBegin}" />
                    </p:calendar>
                        
                    
                    <p:outputLabel for="timeBegin" value="Time Begin:" />
                    <p:calendar id="timeBegin" value="#{eventBean.e.hourBegin}" pattern="HH:mm" 
                                required="true" timeOnly="true" />
                        
                    
                    <p:outputLabel for="timeEnd" value="Time End:" />
                    <p:calendar id="timeEnd" value="#{eventBean.e.hourEnd}" pattern="HH:mm a" 
                                required="true" timeOnly="true"/>
                      
                   </p:panelGrid>

                    <p:commandButton value="Apply" onclick="PrimeFaces.monitorDownload(start, stop);"
                                     action="#{eventBean.ClickOnApply()}"
                                     style="margin: 40px 25px auto auto" update="for"/>
                    <p:commandButton value="Cancel" onclick="history.go(-1);return false;" style="margin: 40px auto auto auto"/>

                    </div>
                    <p:panelGrid columns="2" columnClasses="column1,column2" style="float: bottom; width: 52%; margin: 40px 20px 10px;"> 
                    <p:outputLabel for="participant" value="Participant(s)" style="vertical-align: top"/>
                    <p:autoComplete id="participant" multiple="true" 
                                    value="#{eventBean.participantstomodify}" var="user"
                                completeMethod="#{autoCompleteView_Event.completeTheme}" itemLabel="#{user.email} | #{user.name.toLowerCase()} #{user.surname.toLowerCase()}" 
                                itemValue="#{user}" converter="userConverter" forceSelection="true"
                                minQueryLength="3" > 
                        
                    </p:autoComplete>
                    
                       </p:panelGrid>    
                <p:panelGrid columns="2" columnClasses="column1,column2" style="width: 20%; margin: 15px 20px 50px">     
                    <p:outputLabel for="publicprivate" value="Public" />
                    <p:selectBooleanButton id="publicprivate" value="#{eventBean.e.public1}" onLabel="Yes" offLabel="No"
                                           required="true" style="width:60px" />
                        
                    <p:outputLabel for="outdoor" value="Outdoor" />
                    <p:selectBooleanButton id="outdoor" value="#{eventBean.e.outdoor}" onLabel="Yes" offLabel="No"
                                           required="true" style="width:60px" />
                        
                   </p:panelGrid>
               
            </p:panel>
        
        
        <p:message for="DateBegin" display="tooltip" />
        
        <script type="text/javascript">
            function start() {
                PF('statusDialog').show();
            }

            function stop() {
                PF('statusDialog').hide();
            }
        </script>
        
        <p:dialog modal="true" widgetVar="statusDialog" header="#{eventBean.par == 'true' ? 'Updating' : 'Creating'} the event" draggable="false" closable="true" resizable="false">
            <p:panelGrid columns="2" style="vertical-align: central" >
                <p:row><h:graphicImage library="images" name="progress.BAK-FOURTH.gif" /></p:row>
                <p:row>Please, wait...</p:row>
            </p:panelGrid>
        </p:dialog>
        
        </h:form>
    </body>
</html>
